 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 body {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     width: 100vw;
     height: 100vh;
 }

 #menu {
     height: 100px;
     width: 100%;
     display: flex;
     border-bottom: 3px solid #ccc;
     justify-content: space-around;
     align-items: center;
 }

 #canvas {
     flex: 1;
     width: 100vw;
 }

 .btn {
     width: 150px;
     height: 50px;
     border: 1px solid #ccc;
     border-radius: 20px;
     text-align: center;
     line-height: 50px;
     color: #999;
     background-position: center;
     background-repeat: no-repeat;
     background-size: auto 100%;
 }
input:focus{
    outline: none;
}
 .active {
     box-shadow: 0 0 20px deepskyblue;
     border: 1px solid deepskyblue;
 }

#color{
    width: 60px;
    height: 30px;
    border: none;
    box-shadow: none !important;
    border-radius: 0;
}
#color::-webkit-color-swatch-wrapper {
    background-color: #ffffff;
}
#line{
    width: 60px;
    height: 30px;
}